<template>
  <div class="top">
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{ name }}</span>
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '暂无名称'
    }
  },
  methods: {
    logout() {
      // 注销 - 清空数据 - 调用store方法
      this.$store.commit('logout')
      // 返回登录页
      this.$router.push('/login')
    }
  },
  created() {
    this.$http.get('/api/getManager').then((res) => {
      // console.log(res)
      if (res.errNo === 0 && res.message === 'success') {
        this.name = res.accountInfo.username
      }
    })
  }
}
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.top {
  width: 100%;
}
</style>
